<!-- 语音问答 -->
<template>
	<div class="microphone">
		<audio :src="audioUrl" ref="audioRef"></audio>
		<div class="cardbox flex flex-v flex-pack-center">
			<div class="myForm" v-if="operateType == 'nostart' && !(isAnswering - 0)">
				<div class="flex flex-align-center">
					<div class="tags">
						<div class="tag" @click="chageUseModel(0)" :class="[{ active: isUseModel == 0 }]">
							老师录入答案
						</div>
						<div class="tag" @click="chageUseModel(1)" :class="[{ active: isUseModel == 1 }]">
							使用大模型答案
						</div>
					</div>
					<div class="btn" @click="startAnswer">
						<img src="/home/btn.png" alt="" />
						<span>开始</span>
					</div>
				</div>
				<div style="color: #f00">长按语音键2s后开始答题，以防收音不完整</div>
			</div>

			<template v-else-if="operateType == 'answer'">
				<div class="bind-bd">
					<div class="list">
						<div>{{ questionStr }}</div>
					</div>
				</div>
				<div class="answer flex-1">
					<div class="txtlist">
						<div class="item flex flex-align-center" v-for="(item, index) in txtlist" :key="index">
							<div class="avatar">{{ item.studName }}</div>
							<div class="flex-1">
								<div>{{ item.data }}</div>
							</div>
							<img
								:src="`/audio/noticeplay.${item.play ? 'gif' : 'png'}`"
								alt=""
								srcset=""
								@click="play(item, index)"
							/>
						</div>
					</div>
					<div class="save-btn" @click="stopAnswer">结束</div>
					<div class="prevtxt" @click="prevtxtScreen" v-show="txtlist.length > 0"></div>
					<div class="nexttxt" @click="nexttxtScreen" v-show="txtlist.length > 0"></div></div
			></template>
			<div class="resultbox" v-else>
				<div class="conbox-con">
					<div class="conbox-bd">
						<div class="list flex flex-v">
							<div class="flex-1" style="overflow: auto">
								{{ teacherAnswer ? teacherAnswer : isUseModel ? '' : '等待老师录入答案' }}
							</div>
							<a-spin :spinning="spinning"
								><div
									class="flex flex-align-center flex-pack-justify"
									v-if="tongjiVoiceInfo && tongjiVoiceInfo.answer"
								>
									<div>
										<div>平均分：<a-rate v-model="tongjiVoiceInfo.rate" disabled /></div>
										<div style="width: 600px; height: 260px">
											<scoreCount :info="scoreCount"></scoreCount>
										</div>
									</div>
									<div class="rank">
										<div
											class="rank-item flex flex-align-center"
											v-for="(item, index) in rankList"
											:key="index"
										>
											<div>{{ index + 1 }}</div>
											<div class="icon">
												<img :src="`avatar/avatar${index + 1}.png`" alt="" />
											</div>
											<div class="name flex-1">{{ item.studName }}</div>
											<div class="score">
												<a-rate v-model="item.rate" disabled />
											</div>
										</div>
									</div></div
							></a-spin>
						</div>
					</div>
					<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import bus from '@/utils/eventBus';
import { debounce, getBytesLength, base64ToBlob, dataURLtoBlob } from '@/utils/base.js';
import $ from '@/utils/jquery-vendor';
import scoreCount from './scoreCount.vue';
let timer = null;
//雪花字符
class Snowflake {
	constructor(workerId, datacenterId, epoch = BigInt(1577836800000)) {
		// 2020-01-01
		if (workerId > 1023n || workerId < 0n) {
			throw new Error('worker Id can only have 10 bits');
		}
		if (datacenterId > 31n || datacenterId < 0n) {
			throw new Error('datacenter Id can only have 5 bits');
		}
		this.workerId = workerId;
		this.datacenterId = datacenterId;
		this.sequence = 0n;
		this.epoch = epoch;
		this.lastTimestamp = -1n;
	}

	nextId() {
		const timestamp = BigInt(Date.now());

		if (timestamp < this.lastTimestamp) {
			throw new Error(
				`Clock moved backwards. Refusing to generate id for ${this.lastTimestamp - timestamp} milliseconds`
			);
		}

		if (timestamp === this.lastTimestamp) {
			this.sequence = (this.sequence + 1n) & 4095n; // 12 bits
			if (this.sequence === 0n) {
				timestamp = this.tilNextMillis(this.lastTimestamp);
			}
		} else {
			this.sequence = 0n;
		}

		this.lastTimestamp = timestamp;

		return ((timestamp - this.epoch) << 22n) | (this.datacenterId << 17n) | (this.workerId << 12n) | this.sequence;
	}

	tilNextMillis(lastTimestamp) {
		let timestamp = BigInt(Date.now());
		while (timestamp <= lastTimestamp) {
			timestamp = BigInt(Date.now());
		}
		return timestamp;
	}
}
const snowflake = new Snowflake(BigInt(1), BigInt(1));
export default {
	name: 'microphone',
	components: {},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			csId: '',
			classId: '',
			microphoneType: 2,
			operateType: 'nostart', //组件页面类型
			hasQuestion: false, //老师是否提问
			txtlist: [],
			bidObj: {},
			questionStr: '',
			audioUrl: '',
			baseUrl: process.env.VUE_APP_BASE_API + '/mp3/',
			questId: '', //题目id，需要传给后端
			scoreCount: [
				{
					name: '4星以上',
					value: 0,
				},
				{
					name: '4星',
					value: 0,
				},
				{
					name: '4星以下',
					value: 0,
				},
				{
					name: '未作答',
					value: 0,
				},
			],
			tongjiVoiceInfo: {},
			rankList: [],
			isUseModel: 0, //是否使用大模型答案
			teacherAnswer: '', //老师答案
			spinning: false,
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
		this.classId = beginClassData.classId;
	},
	components: { scoreCount },
	mounted() {
		let $me = this;
		this.$nextTick(() => {
			var audio = this.$refs.audioRef;
			if (audio) {
				audio.addEventListener(
					'ended',
					function () {
						$me.txtlist.map((item) => {
							item.play = false;
						});
						$me.audioUrl = null;
					},
					false
				);
			}
		});
	},
	watch: {
		//有线设备上报答题数据
		wiredAnswer: {
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					console.log('答题器');
					let beginClassData = this.$ls.get('beginClass');
					//如果是老师录入答案
					if (!this.isUseModel && this.operateType == 'result' && this.teacherAnswer) {
						//确定答案
						if (newValue.ans_str == 'E') {
							//查询统计结果
							this.tongjiVoice(this.questId, this.formData.classId);
							//发送结束
							this.WEBSOCKET_SEND({
								fun: 'answer_start',
								uID: this.teacherInfo.machineId - 0,
								type: 128, //结束答题
							});
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: this.teacherInfo.machineId - 0,
								msg: '   ' + this.teacherInfo.teacherName,
							});
						} else if (newValue.ans_str == 'F') {
							//重新录入答案
							//给老师发送输入答题的指令
							this.WEBSOCKET_SEND({
								fun: 'answer_start',
								uID: this.teacherInfo.machineId - 0,
								type: 8, //结束答题
							});
							let msg = '   ' + this.teacherInfo.teacherName;
							let len = 16 - getBytesLength(msg);
							for (var i = 0; i < len; i++) {
								msg = msg + ' ';
							}
							msg = msg + '长按语音键录答案';
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: this.teacherInfo.machineId - 0,
								msg: msg,
							});
						}
					}
					//目前没有抢答流程
					return;
					if (this.curuID) {
						//如果有学生已经抢到麦克风，怎不再处理
						return;
					}
					if (beginClassData && JSON.stringify(beginClassData) != '{}' && beginClassData.topicType != 99) {
						let uID = newValue.uID - 0;
						let stuInfo = this.studentList.find((item) => item.machineId - 0 == uID);
						this.ans_id = sessionStorage.getItem('ans_id');
						console.log('答题2', this.ans_id, newValue.ans_id, newValue.ans_str);

						if (this.ans_id && this.ans_id == newValue.ans_id && newValue.ans_str == 'G') {
							this.curuID = uID;
							//结束题目，单独发送语音题
							this.WEBSOCKET_SEND({
								fun: 'answer_start',
								uID: 0,
								type: 128, //结束答题
							});
							let msg = '   ' + this.teacherInfo.teacherName;
							let len = 16 - getBytesLength(msg);
							for (var i = 0; i < len; i++) {
								msg = msg + ' ';
							}
							msg = msg + ' 长按语音键提问';
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: this.teacherInfo.machineId - 0,
								msg: msg,
							});
							this.studentList.forEach((item) => {
								console.log('item', item);
								if (item.status == 1) {
									let msg = '   ' + item.studName;
									let len = 16 - getBytesLength(msg);
									for (var i = 0; i < len; i++) {
										msg = msg + ' ';
									}
									if (item.machineId - 0 == uID) {
										msg = msg + '长按语音键发言';
										timer = setTimeout(() => {
											this.WEBSOCKET_SEND({
												fun: 'answer_start',
												uID: uID,
												type: 8,
											});
										}, 50);
									} else {
										msg = msg + '   已有人发言';
									}
									this.WEBSOCKET_SEND({
										fun: 'dtq_echo_set',
										uID: item.machineId - 0,
										msg: msg,
									});
								}
							});
						}
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
		voiceStream: {
			handler(newValue, oldValue) {
				if (newValue && JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					console.log('this.ans_id', this.ans_id);
					if (this.ans_id == newValue.ans_id) {
						//如果没有问题，则不处理学生语音
						if (!this.hasQuestion && newValue.uID != this.teacherInfo.machineId - 0) {
							return;
						}
						console.log('newValue.pac_num', newValue.pac_num);
						if (newValue.pac_num == 1) {
							this.bidObj[newValue.uID] = snowflake.nextId().toString();
						}
						console.log('this.bidObj[newValue.uID]', this.bidObj[newValue.uID]);
						if (this.bidObj[newValue.uID]) {
							let msg = {
								...newValue,
								bid: this.bidObj[newValue.uID],
								csId: this.formData.csId, //课题id
								ans_id: this.ans_id,
								isteacher:
									newValue.uID == this.teacherInfo.machineId - 0 ? (this.isAnswering ? 1 : 2) : 0, //是否是老师 0 学生回答  1 老师提问； 2  老师回答
								model: 'qwen',
								questId: this.questId,
								volType: newValue.voice_type == 'speex' ? 1 : 0,
								subjCode: this.formData.subjectCode,
							};
							this.que_RABBITMQ_SEND(JSON.stringify(msg));
						}
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
		//老师答题器语音识别
		rkvoiceChar: {
			handler(newValue, oldValue) {
				console.log('newValue', newValue);
				if (!newValue || !newValue.data) {
					return;
				}
				if (
					newValue &&
					this.ans_id == newValue.ansId &&
					newValue &&
					JSON.stringify(newValue) != JSON.stringify(oldValue)
				) {
					//判断是否是老师，如果是老师，则给发题
					let uID = newValue.uID - 0;
					if (this.teacherInfo.machineId - 0 == uID) {
						if (this.operateType == 'result') {
							//表示老师答案
							this.teacherAnswer = newValue.data;
							//给老师发一个判断题，用来确实是否是正确答案
							this.WEBSOCKET_SEND({
								fun: 'answer_start',
								uID: this.teacherInfo.machineId - 0,
								type: 2,
							});
							let msg = '  确认答案（√）';
							let len = 16 - getBytesLength(msg);
							for (var i = 0; i < len; i++) {
								msg = msg + ' ';
							}
							msg = msg + ' 重新录入（×）';
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: this.teacherInfo.machineId - 0,
								msg: msg,
							});
						} else {
							//老师的问题可以多次录入
							this.questionStr = this.questionStr + newValue.data;
							/* 如果发过题目就不再多次发题 */
							if (!this.hasQuestion) {
								this.hasQuestion = true;
								this.studentList.forEach((item) => {
									console.log('item', item);
									if (item.status == 1) {
										let msg = '   ' + item.studName;
										let len = 16 - getBytesLength(msg);
										for (var i = 0; i < len; i++) {
											msg = msg + ' ';
										}
										msg = msg + ' 长按语音键答题';
										this.WEBSOCKET_SEND({
											fun: 'dtq_echo_set',
											uID: item.machineId - 0,
											msg: msg,
										});
									}
								});
							}
						}
					} else if (this.operateType == 'answer') {
						if (!this.hasQuestion) {
							return;
						}
						if (this.studentList) {
							let stud = this.studentList.find((item) => item.machineId - 0 == newValue.uID);
							this.txtlist.push({
								...newValue,
								aiAnswer: '',
								...stud,
								play: false,
							});
							this.$nextTick(function () {
								$('.txtlist').animate(
									{
										scrollTop: $('.txtlist')[0].scrollHeight,
									},
									400
								);
							});
						}
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			isPro: (state) => state.isPro,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			minProjectLogin: (state) => state.minProjectStore.minProjectLogin, //小程序是否登录
			isAnswering: (state) => state.websockStore.isAnswering,
			ans_id: (state) => state.websockStore.ans_id,
			teacherInfo: (state) => state.user.teacherInfo,
		}),
		wiredAnswer() {
			return this.$store.getters.onEvent('wiredanswer');
		},
		voiceStream() {
			return this.$store.getters.onEvent('voice_stream');
		},

		rkvoiceChar() {
			return this.$store.getters.onRkvoiceChar();
		},
		//是否是语音设备
		isVoiceDevice() {
			return ['RP554', 'RP555P'].includes(this.machineData.wareVersion);
		},
	},

	methods: {
		...mapMutations([
			'que_RABBITMQ_SEND',
			'WEBSOCKET_SEND',
			'SET_studentList',
			'SET_STOPDEVICEEVENTLIST',
			'SET_isAnswering',
		]),
		handleMicrophoneType(e) {
			this.microphoneType = e.target.value;
		},
		//去答题
		startAnswer() {
			/* 判断移动端正在控制PC端 */
			if (this.minProjectLogin) {
				this.$message.error('移动端正在控制PC端，不能发题！');
				return;
			}
			//发题前判断该班级是否有学生。
			if (this.studentList.length == 0) {
				let tempTestData = this.$ls.get('tempTestData');
				this.$message.error('（' + tempTestData.className + '）班级没有学生，请先添加学生！');
				return;
			}
			this.hasQuestion = false;
			this.txtlist = [];
			this.bidObj = {};
			this.questionStr = '';
			this.teacherAnswer = '';
			this.questId = '';
			this.$ls.remove('questId');
			if (this.teacherInfo && this.teacherInfo.machineId) {
				this.sendStartAnswer();
			} else {
				this.$message.error('该老师没有答题器，无法发题');
			}
		},
		async sendStartAnswer() {
			await this.sendVoiceTest();
			this.WEBSOCKET_SEND({
				fun: 'answer_start',
				uID: 0,
				type: 8,
			});
			let msg = '   ' + this.teacherInfo.teacherName;
			let len = 16 - getBytesLength(msg);
			for (var i = 0; i < len; i++) {
				msg = msg + ' ';
			}
			msg = msg + ' 长按语音键提问';
			this.WEBSOCKET_SEND({
				fun: 'dtq_echo_set',
				uID: this.teacherInfo.machineId - 0,
				msg: msg,
			});
			this.operateType = 'answer';
			this.SET_isAnswering(1);
		},
		//发送语音题
		sendVoiceTest() {
			let { classId, csId } = this.formData;
			return this.$postAction(this.$sysManageapi.answerUrl.sendTempTestPaper, {
				classId,
				csId,
				// stuIds: this.answerstulist.map((item) => item.studId),
				stuIds: this.studentList.map((item) => item.studId),
				teacherId: this.teacher && this.teacher.teacherId,
				//type: answerTypeEnum[this.sendType], //全答，选答，抽答
				type: 1, //全答
				userId: this.userinfo.userId,
				isVoice: 1, //是否是语音题
				isUseModel: this.isUseModel, //是否使用大模型答案
			}).then((da) => {
				console.log('haha zhelchengglema');
				this.$ls.set('questId', da.data.sdTestQuestId);
				this.questId = da.data.sdTestQuestId;
			});
		},
		stopAnswer() {
			//学生结束答题
			const uidlist = this.studentList.map((item) => item.machineId - 0);
			this.tongjiVoiceInfo = {};
			this.rankList = [];
			if (this.hasQuestion) {
				if (this.isUseModel) {
					uidlist.push(this.teacherInfo.machineId - 0);
					this.tongjiVoice(this.questId, this.formData.classId);
				} else {
					//给老师发送输入答题的指令
					let msg = '   ' + this.teacherInfo.teacherName;
					let len = 16 - getBytesLength(msg);
					for (var i = 0; i < len; i++) {
						msg = msg + ' ';
					}
					msg = msg + '长按语音键录答案';
					this.WEBSOCKET_SEND({
						fun: 'dtq_echo_set',
						uID: this.teacherInfo.machineId - 0,
						msg: msg,
					});
				}

				this.operateType = 'result';
			} else {
				uidlist.push(this.teacherInfo.machineId - 0);
				this.operateType = 'nostart';
				this.questId = '';
				this.$ls.remove('questId');
			}
			this.WEBSOCKET_SEND({
				fun: 'answer_start',
				uidlist,
				type: 128, //结束答题
			});
			this.SET_isAnswering(0);
		},
		/* 切换语音识别上一屏 */
		prevtxtScreen() {
			this.$nextTick(function () {
				let scrollTop = $('.txtlist')[0].scrollTop;
				let offsetHeight = $('.txtlist')[0].offsetHeight;
				console.log(scrollTop);
				console.log(offsetHeight);
				$('.txtlist').animate(
					{
						scrollTop: scrollTop - offsetHeight > 0 ? scrollTop - offsetHeight : 0,
					},
					400
				);
			});
		},
		/* 切换语音识别下一屏 */
		nexttxtScreen() {
			this.$nextTick(function () {
				let scrollTop = $('.txtlist')[0].scrollTop;
				let offsetHeight = $('.txtlist')[0].offsetHeight;
				let scrollHeight = $('.txtlist')[0].scrollHeight;
				console.log(scrollTop);
				console.log(offsetHeight);
				$('.txtlist').animate(
					{
						scrollTop: scrollTop + offsetHeight > scrollHeight ? scrollHeight : scrollTop + offsetHeight,
					},
					400
				);
			});
		},
		play(info) {
			if (info.play) {
				info.play = false;
				this.$refs.audioRef.pause();
			} else {
				info.play = true;
				this.audioUrl = this.baseUrl + info.bID + '/a.mp3';
				this.$refs.audioRef.load();
				this.$nextTick(() => {
					this.$refs.audioRef.play();
				});
			}
		},
		endPlay() {
			console.log('结束了吗');
			this.txtlist.map((item) => {
				item.play = false;
			});
			this.audioUrl = null;
		},
		reback() {
			this.WEBSOCKET_SEND({
				fun: 'answer_start',
				uID: 0,
				type: 128, //结束答题
			});
			this.operateType = 'nostart';
			this.txtlist = [];
			this.bidObj = {};
			this.questionStr = '';
			this.teacherAnswer = '';
			this.questId = '';
			this.$ls.remove('questId');
		},
		tongjiVoice(questId, classId) {
			this.spinning = true;
			this.$postAction(this.$sysManageapi.answerUrl.tongjiVoice + '?questId=' + questId + '&classId=' + classId)
				.then((res) => {
					if (res && res.code == 1) {
						let list = [];
						this.tongjiVoiceInfo = res.data;
						if (res.data.similartyVos && res.data.similartyVos.length > 0) {
							res.data.similartyVos.forEach((item) => {
								item.rate = Math.ceil(item.score / 20);
								item.rate = item.rate == 0 ? 1 : item.rate;
							});
							list = this.tongjiVoiceInfo.similartyVos.sort((a, b) => {
								return b.score - a.score;
							});
						}
						res.data.rate = Math.ceil(res.data.averageScore / 20);
						res.data.rate = res.data.rate == 0 ? 1 : res.data.rate;
						this.teacherAnswer = this.tongjiVoiceInfo.answer;
						this.rankList = list.slice(0, list.length >= 5 ? 5 : list.length);
						console.log('list', list);
						let stuScoreObj = {
							level1: [],
							level2: [],
							level3: [],
							level4: [],
						};
						let ids = [];
						list.forEach((item) => {
							ids.push(item.uid);
							switch (true) {
								case item.score >= 90:
									stuScoreObj.level1.push(item);
									break;
								case item.score >= 80:
									stuScoreObj.level2.push(item);
									break;
								case item.score <= 79:
									stuScoreObj.level3.push(item);
									break;
								default:
									break;
							}
						});
						this.studentList.forEach((item) => {
							let id = item.machineId;
							if (!ids.includes(id)) {
								stuScoreObj.level4.push(item);
							}
						});
						this.scoreCount[0].value = stuScoreObj.level1.length;
						this.scoreCount[1].value = stuScoreObj.level2.length;
						this.scoreCount[2].value = stuScoreObj.level3.length;
						this.scoreCount[3].value = stuScoreObj.level4.length;
						this.$forceUpdate();
					}
				})
				.finally(() => {
					this.spinning = false;
					this.questId = '';
					this.$ls.remove('questId');
				});
		},
		chageUseModel(type) {
			this.isUseModel = type;
		},
	},
};
</script>

<style lang="less" scoped>
.microphone {
	// background: url(/redpack/redpackbg.jpg) no-repeat center bottom;
	height: 100%;
	width: 100%;
	position: relative;
}
.conbox-con {
	height: 100%;
	border-radius: 8px;
	background: transparent;
	z-index: 6;
	position: relative;
}
.conbox-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
	margin-top: 0;
}

.conbox-bd {
	width: 1162px;
	height: calc(100vh - 200px);
	margin: 0 auto 27px;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;
		text-align: left;
	}
}
.answer {
	width: 1162px;
	margin: 0 auto;
	overflow: visible;
	height: 100%;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
.resultbox {
	width: 1162px;
	margin: 0 auto;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	height: 100%;
	// padding: 50px 0 30px;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
	.music {
		width: 300px;
		height: 200px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -100px auto 0;
	}
	.music .bar {
		width: 8px;
		border-radius: 10px;
		background: @primary-color;
		animation: movement 1.5s ease-in-out infinite;
	}
	.music .bar:nth-child(1) {
		animation-delay: 1s;
	}
	.music .bar:nth-child(2) {
		animation-delay: 0.8s;
	}
	.music .bar:nth-child(3) {
		animation-delay: 0.6s;
	}
	.music .bar:nth-child(4) {
		animation-delay: 0.4s;
	}
	.music .bar:nth-child(5) {
		animation-delay: 0.2s;
	}
	.music .bar:nth-child(6) {
		animation-delay: 0.2s;
	}
	.music .bar:nth-child(7) {
		animation-delay: 0.4s;
	}
	.music .bar:nth-child(8) {
		animation-delay: 0.6s;
	}
	.music .bar:nth-child(9) {
		animation-delay: 0.8s;
	}
	.music .bar:nth-child(10) {
		animation-delay: 1s;
	}
	.music .bar:nth-child(11) {
		animation-delay: 1s;
	}
	.music .bar:nth-child(12) {
		animation-delay: 0.8s;
	}
	.music .bar:nth-child(13) {
		animation-delay: 0.6s;
	}
	.music .bar:nth-child(14) {
		animation-delay: 0.4s;
	}
	.music .bar:nth-child(15) {
		animation-delay: 0.2s;
	}
	.namebar {
		position: relative;
		background: @primary-color;
		border-radius: 50px;
		width: 300px;
		height: 75px;
		text-align: center;
		color: #fff;
		font-size: 41px;
		font-weight: 600;
		padding-left: 50px;
		line-height: 75px;
		margin: 30px auto;
	}
	.namebar img {
		position: absolute;
		left: -20px;
		bottom: -10px;
		width: 122px;
		height: 122px;
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 15px;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: 8px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}
.save-btn {
	background: @primary-color;
	width: 300px;
	height: 60px;
	line-height: 60px;
	border-radius: 40px;
	text-align: center;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
	margin: 20px auto;
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	&.small {
		width: 100px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		margin: 20px auto;
	}
	&:hover {
		background: rgba(0, 190, 197, 0.5);
	}
	&.official:hover {
		background: rgba(86, 151, 245, 0.5);
	}
}
.fixed-save-btn {
	background: @primary-color;
	width: 247px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	position: fixed;
	bottom: 60px;
	right: 180px;
	z-index: 9;
	&:hover {
		background: rgba(0, 190, 197, 0.5);
	}
	&.official:hover {
		background: rgba(86, 151, 245, 0.5);
	}
	@media screen and (max-width: 1366px) {
		width: 227px;
	}
}
.bind-bd {
	width: 1162px;
	margin: 30px auto 0;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		min-height: 120px;
		font-size: 26px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;
	}
}
.answer {
	position: relative;
}
.txtlist {
	position: absolute;
	top: 10px;
	bottom: 160px;
	left: 0;
	right: 0;
	overflow: auto;
	.item {
		border: 4px solid @primary-color;
		border-radius: 20px;
		background: #f3f8ff;
		padding: 10px;
		margin-top: 10px;
		font-size: 24px;
		color: @primary-color;
		.avatar {
			width: 74px;
			height: 74px;
			border-radius: 100%;
			background: @primary-color;
			color: #fff;
			font-weight: bold;
			font-size: 20px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.flex-1 {
			min-width: 0;
			margin: 0 10px;
		}
		img {
			width: 53px;
			height: 53px;
			cursor: pointer;
		}
	}
}

.prevtxt,
.nexttxt {
	position: absolute;
	bottom: 160px;
	right: -10px;
	z-index: 999;
	width: 60px;
	height: 60px;
	margin-right: -60px;
	background: @primary-color no-repeat center center;
	background-size: 40px auto;
	border-radius: 100%;
	border: 3px solid #fff;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.prevtxt {
	margin-bottom: 70px;
	background-image: url(/audio/prev.png);
}

.nexttxt {
	background-image: url(/audio/next.png);
}
.rank {
	width: 360px;
	.rank-item {
		margin-bottom: 10px;
		.icon {
			width: 50px;
			height: 50px;
			margin: 0 20px;
			border-radius: 100%;
			overflow: hidden;
			border: 2px solid rgba(244, 249, 254, 1);
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.name {
		}
		.score {
			width: 140px;
			color: #ff3f3e;
		}
	}
}
.tags {
	.tag {
		width: auto;
		height: auto;
		padding: 5px 10px;
		margin: 0 10px;
		cursor: pointer;
		background: #fff;
		&.active {
			background: @primary-color;
			border-color: @primary-color;
			color: #fff;
		}
	}
}
.btn {
	position: relative;
	height: 60px;
	width: 60px;
	cursor: pointer;
	span {
		position: absolute;
		color: #fff;
		font-size: 12px;
		top: 50%;
		left: 50%;
		transform: translate(-35%, -50%);
		white-space: nowrap;
	}
}
</style>

<style>
@keyframes movement {
	0%,
	100% {
		height: 2px;
	}
	50% {
		height: 80px;
	}
}
</style>
